import React from 'react';
import { connect } from 'react-redux';
import { View, Text, Image } from '@tarojs/components';
import Icon from '@/components/Icon';
import { customeColor } from '@/src/config';
import './index.scss';

const statusList = [
  /*  status
        退款 1 2 3 9 10
        退货 1 3 4 5 6 9 10
        换货 1 3 4 5 6 7 8 9 10
    */
  //退款 kind:1
  { title: '发起退款申请', text: '用户提交了退货申请，待商家审核中' }, //1
  { title: '商家已同意退款申请', text: '商家已同意您的退款申请，待财务审核' }, //2
  { title: '商家已拒绝退款申请', text: '商家拒绝了本次售后服务申请' }, //3
  { title: '退款成功', text: '您的退款已受理完成，请您注意查收' }, //9
  //退货  kind:2
  { title: '发起退货申请', text: '用户提交了退货申请，待商家审核中' }, //1
  { title: '商家已拒绝退货申请', text: '商家拒绝了本次售后服务申请' }, //3
  { title: '商家已同意退货申请', text: '商家同意了本次售后服务申请，自动发送退货地址给用户' }, //4
  { title: '请等待商家收货', text: '如果商家收到货并验货无误，将操作并退款给您' }, //5
  { title: '商家拒绝收货', text: '商家拒绝收货，建议与商家联系' }, //6
  { title: '退货成功', text: '您的售后申请已退款成功，请您注意查收' }, //9
  //换货  kind:3
  { title: '发起换货申请', text: '用户提交了退货申请，待商家审核中' }, //1
  { title: '商家已拒绝换货申请', text: '商家拒绝了本次售后服务申请' }, //3
  { title: '商家已同意换货申请', text: '商家同意了本次售后服务申请，自动发送退货地址给用户' }, //4
  { title: '待商家收货', text: '等待商家收货' }, //5
  { title: '商家拒绝收货', text: '商家拒绝收货' }, //6
  { title: '商家已收货', text: '商家已收货，正在为您打包换货商品' }, //7
  { title: '商家已发出换新货', text: '商家已发出换新货，待用户收货' }, //8
  { title: '换货成功', text: '换货商品已确认收货，换货完成' }, //9
  //已撤销申请
  { title: '申请撤销', text: '用户已撤销申请，如有需要可重新提交售后申请' }, //10
];

const getStatusIndex = (kind, status) => {
  let index = 0;
  switch (status) {
    case 1:
      index = kind == 1 ? 0 : kind == 2 ? 4 : 10;
      break;
    case 2:
      index = 1;
      break;
    case 3:
      index = kind == 1 ? 2 : kind == 2 ? 5 : 11;
      break;
    case 4:
      index = kind == 2 ? 6 : 12;
      break;
    case 5:
      index = kind == 2 ? 7 : 13;
      break;
    case 6:
      index = kind == 2 ? 8 : 14;
      break;
    case 7:
      index = 15;
      break;
    case 8:
      index = 16;
      break;
    case 9:
      index = kind == 1 ? 3 : kind == 2 ? 9 : 17;
      break;
    case 10:
      index = 18;
      break;
    default:
      break;
  }
  return index;
};

const Process = ({ data = {}, isFirst, isLast }) => {
  const {
    status,
    kind = 1,
    time = '',
    url = '',
    reason = '',
    remark = '',
    logisticsStatus = '',
    address = '',
    name = '',
    mobile = '',
    logisticsComName = '',
    logisticsNum = '',
    refundAll = 0,
    refundAmount = -1,
    isSystem = 0,
    isEdit = 0,
  } = data;
  console.log('isSystem:', isSystem);
  let index = getStatusIndex(kind, status);
  let urls = [];
  if (url.length) {
    urls = JSON.parse(url);
  }
  let title = statusList[index].title;
  if (isEdit) {
    title = statusList[index].title.replace('发起', '修改');
  }
  return (
    <View className="flex-column process">
      <View className="disBox">{!isFirst && <View className="colLine colHeight"></View>}</View>
      <View className="labelLine flex-row--center">
        <Icon name="icon_sure" size={40} color={isFirst ? customeColor : '#e5e5e5'} />
        <Text className={'txt28 bold ml24 ' + (isFirst ? 'customePageStyle' : '')}>{title}</Text>
      </View>
      <View className="detail flex-row">
        <View
          className={'colLine ' + (isFirst ? 'customePageBackgroundStyle' : isLast ? 'nosee' : '')}
        ></View>
        <View className="rightArea">
          <View className={'txt24 mt4 ' + (isFirst ? 'customePageStyle' : '')}>
            {statusList[index].text +
              (logisticsStatus.length > 0 ? '；货物状态：' + logisticsStatus : '') +
              (refundAll == 1 || refundAll == 2
                ? '；退款类型：' + (refundAll == 1 ? '全部退款' : '部分退款')
                : '') +
              (refundAmount > 0 ? '；退款金额：' + refundAmount : '') +
              (reason.length > 0 ? (index == 2?'；拒绝原因：':'；申请原因：') + reason : '') +
              (remark.length > 0 ? (status == 1 ? '；申请说明：' : '；拒绝说明：') + remark : '') +
              (address.length > 0 ? '；退货地址：' + name + '，' + mobile + '，' + address : '') +
              (logisticsComName.length > 0 ? '；物流公司：' + logisticsComName : '') +
              (logisticsNum.length > 0 ? '；物流单号：' + logisticsNum : '')}
          </View>
          {urls.length > 0 && (
            <View className="mt4 flex-row">
              {urls.map((item) => (
                <Image className="pic" src={item} />
              ))}
            </View>
          )}
          <View className="txt22 gray mt4">{time}</View>
        </View>
      </View>
    </View>
  );
};

const ApplyProcess = ({ detail = {} }) => {
  const statusProcessList = detail.statusList || [];
  return (
    <View className="ApplyProcess flex-column--center">
      <View className="processList box2">
        <View className="txt32">进度跟踪</View>
        {statusProcessList.length > 0 &&
          statusProcessList.map((item, index) => {
            return (
              <Process
                data={item}
                isFirst={index == 0}
                isLast={index == statusProcessList.length}
              />
            );
          })}
      </View>
    </View>
  );
};

export default connect(({ order }) => ({
  detail: order.adjustmentDetail,
}))(ApplyProcess);
